// 储存变量
@rootSize: 3.75vw;
header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // background-color: pink;
    width: 100%;
    height: (46 / @rootSize);
    border-bottom: 1px solid #ddd;
    z-index: 999;
    background-color: #fff;

    h1 {
        a {
            display: inline-block;
            padding-left: (20 / @rootSize);
            img {
                width: (26 / @rootSize);
                height: (26 / @rootSize);
            }
        }
    }
    button {
        background: #fb7299;
        color: #fff;
        padding: 0 (16 / @rootSize);
        border-radius: (16 / @rootSize);
        margin-right: (16 / @rootSize);
        font-size: (13 / @rootSize);
        border: 0;
        width: (136 / @rootSize);
        height: (30 / @rootSize);
        margin-left: (15 / @rootSize);
    }
    ul {
        flex: 1;
        display: flex;
        width: (138 / @rootSize);
        justify-content: space-evenly;
        li {
            display: flex;
        }
        a {
            width: 100%;
            height: 100%;
            color: #90959b;
            &.active {
                color: #fb7299;
            }
        }
    }
}

// 筛选部分
.filter {
    margin-top: (46 / @rootSize);
    padding: (10 / @rootSize) (16 / @rootSize) 0;
    .filter-out {
        li:first-child {
            width: (343 / @rootSize);
            height: (96 / @rootSize);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
        li {
            font-size: (12 / @rootSize);
            display: flex;
            flex-wrap: wrap;
            position: relative;
            height: (30 / @rootSize);
            a {
                padding: (2 / @rootSize) (10 / @rootSize);
                margin: (6 / @rootSize) 0;
                color: #6c727e;
                height: (20 / @rootSize);
                box-sizing: border-box;
                &.active {
                    color: #fb7299;
                }
            }

            .btn-filter {
                position: absolute;
                top: (9 / @rootSize);
                right: 0;

                span {
                    color: #6c727e;
                }
                .arrow {
                    display: inline-block;
                    width: (10 / @rootSize);
                    height: (10 / @rootSize);
                    background: url(../images/cate-images/arrow.png) no-repeat center;
                    transform: rotate(90deg);
                }
            }
            &.close {
                display: none;
                // display: block;
            }
            &:nth-child(2) {
                margin-top: (8 / @rootSize);
            }
        }
    }
}

// 主体部分
.main {
    ul {
        padding: 0 (8 / @rootSize) (16 / @rootSize);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        li {
            width: (115 / @rootSize);
            height: (200 / @rootSize);
            padding: (8 / @rootSize);
            display: flex;
            a {
                width: 100%;
                height: 100%;
                // background-color: pink;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                .pic {
                    width: 100%;
                    img {
                        width: 100%;
                    }
                }
                p:nth-child(2) {
                    margin-top: (8 / @rootSize);
                    color: #222;
                    font-size: (14 / @rootSize);
                }
                p:nth-child(3) {
                    color: #999;
                    font-size: (12 / @rootSize);
                    margin-top: (3 / @rootSize);
                }
            }
        }
    }
}
